<template>
  <div class="about">
    <button @click="changeAge">修改vuex里的age</button>
    <h1>{{ age }}</h1>
    <h1>{{ num }}</h1>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>
<script>
import { reactive, toRefs, computed } from "vue";
import { useStore } from "vuex";

export default {
  setup() {
    const data = reactive({
      list: [
        { name: "小明", age: 18 },
        { name: "小丽", age: 20 },
        { name: "小红", age: 30 },
      ],
      num: 10,
    });

    console.log(data.list);

    ////vuex的用法

    const store = useStore();
    //调用useStore这个方法  store就相当于是之前的this.$store
    console.log(store.state.age);
    console.log(store.state.list);
    //vuex里的state数据要想使用的话用通过计算属性return一下才能用

    const age = computed(() => {
      return store.state.age;
    });
    //vue3的计算属性的用法 计算属性也要引入才能用 计算属性在vue3中是一个函数 接受一个回调函数作为参数

    const changeAge = () => {
      store.commit("changeAge");
    };
    //调用vuex里的mutation方法来改变age

    return { ...toRefs(data), changeAge, age };
  },
};
</script>
